ontabfocus Event |
This event is fired when a tab receives focus.
Syntax
Inline HTML |
<div cordysType="wcp.library.ui.Tabs" id = "tabID" ontabfocus="handler()" > ... </div> |
Event property |
tabID.ontabfocus = handler |
Event Information
To invoke |
Create a tab usingcreateTaborgetTabor usingselect()method of application. Click a tab. |
Default Action |
Sets a tab to focus and initiates any action associated with this event. |
Event Object Properties
Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.
Property |
Description |
|---|---|
tabId |
Read-only. String that denotes the unique identifier of the tab that is currently set to focus. |
Remarks
The tabId property from the event object may not return the correct ID. Alternatively, you can use the code below to get the ID of a tab page in Process Platform XForms.
var id = eventObject.tabId; id = id.replace(/_.*_/, "");
Example
The following example shows how the event can be used to set the focus on the same tab till a certain validation condition is satisfied.
<!-- Declaration of the tab in HTML --> <div cordysType="wcp.library.ui.Tabs" id ="testTab" ontabfocus="validate()" ></div> //Create two tab pages in scripting function createTabs() { var tab1 = testTab.getTab("myTab1"); tab1.innerHTML = "<iframe id='myTab1' src='myPage1.htm' style='width:100%;height:100%'></iframe>"; tab1.setCaption("New page 1"); tab1.setTooltip("New page 1"); var tab2 = testTab.getTab("myTab2"); tab2.innerHTML = "<iframe id='myTab2' src='myPage2.htm' style='width:100%;height:100%'></iframe>"; tab2.setCaption("New page 2"); tab2.setTooltip("New page 2"); } <!-- Consider the content in tab page 2 (myPage2.htm) has a textbox defined as follows <input type="text" id="myText" value=""></input> //Implementation script for the validate function function validate() { //Do the validation only if the selected tab is not "myTab2" if (event.tabId != "myTab2") { //Get the tab content. This is possible only from the window.frames collection var content = window.frames["myTab2"]; if (content) { //Get the handle for the text box from the frame var textBox = content.document.all['myText']; //Check if the value is empty. If it is, then get into this loop if (textBox.value == "") { //Alert the error application.notify("Text box value cannot be empty"); //Use select method to select the tab 2 back testTab.getTab("myTab2").select(); //Set the focus on the textbox textBox.focus(); } } } }